<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <script>
        Vue.config.productionTip = false;

        let p = {
            name: "张三",
            sex: "男",
            n: 23
        }
        let number = 38;
        // 使用Object.defineProperty直接在一个对象上定义一个新属性，或者修改一个已经存在的属性
        // Object.defineProperty(obj, prop, desc)传递3个参数
        // 1.obj 需要定义属性的当前对象
        // 2.prop 当前需要定义的属性名
        // 3.desc 属性描述符
        Object.defineProperty(p, "age", {
            // 设置age属性值为18
            // value:18,
            // enumerable:true,  // 控制属性是否可以被枚举，默认是false
            // writable:true,  // 控制属性是否可以被读取、修改，默认是false
            // configurable:true,  // 控制属性是否可以被删除，默认是false

            // 当读取age属性时，调用get（getter）方法
            get() {
                console.log("有人读取了age属性");
                return number;  // 给p增加了一个age属性，当访问age属性的时候，调用get方法，返回number值
            },

            // 当设置age属性时，调用set（setter）方法
            set(value) {
                console.log("有人修改了age属性，值是",value);
                number = value;  // 
            }


        })
        console.log(p.age);

    </script>
</body>
</html>